<script setup>
import {
  gameGetAPI,
  gameViewVideoUploadAPI,
  gameViewImageUploadAPI,
  gameViewDeleteAPI
} from "@/api/AdminApi/game.js";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import EditContainer from "@/components/AdminConponents/EditContainer.vue";
import {Plus} from "@element-plus/icons-vue";
import 'element-plus/theme-chalk/el-message.css'
import {ElMessage} from "element-plus";

const route = useRoute()
const gameViewInfo = ref({})
const gameName = ref()
const gameId = ref()

const getGameViewInfo = async (id = route.params.id) => {
  const res = await gameGetAPI(id)
  gameViewInfo.value = res.data.gameView
  gameName.value = res.data.chineseName
  gameId.value = res.data.id
}
onMounted(() => getGameViewInfo())

// 删除图片/视频
const handleDelete = async (id) => {
  await ElMessageBox.confirm(`你确认删除此文件吗`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  const res = await gameViewDeleteAPI([id])
  if (res.code === 1) {
    ElMessage.success("删除成功")
    getGameViewInfo()
  } else {
    ElMessage.error(res.msg)
  }
}

// 添加图片
const addImage = async (uploadFile) => {
  if (uploadFile) {
    const file = uploadFile.raw || uploadFile; // 根据你的框架或库可能需要调整
    // 检查文件是否为 JPG 格式
    if (file.type !== 'image/jpeg') {
      ElMessage.error('文件格式必须是jpg!')
      return;
    } else if (file.size / 1024 / 1024 > 10) {
      ElMessage.error('文件大小不得超过 10MB!')
      return false
    }
    const res = await gameViewImageUploadAPI(gameId.value, file)
    if (res.code === 1) {
      ElMessage.success("上传成功")
      getGameViewInfo()
    } else {
      ElMessage.error(res.msg)
    }
  }
}

// 添加视频
const addVideo = async (uploadFile) => {
  if (uploadFile) {
    const file = uploadFile.raw || uploadFile;
    const res = await gameViewVideoUploadAPI(gameId.value, file)
    if (res.code === 1) {
      ElMessage.success("上传成功")
      getGameViewInfo()
    } else {
      ElMessage.error(res.msg)
    }
  }
}

// 返回
const router = useRouter()
const cancel = () => {
  router.go(-1)
}
</script>

<template>
  <EditContainer :title="`${gameName}游戏预览编辑`">
    <template #body>
      <el-form label-width="auto">
        <el-form-item>
          <div
              class="outContainer"
              v-for="(item, index) in gameViewInfo.imageUrl"
              :key="index">
            <div class="image-container">
              <el-image class="image" :src="item.url" :preview-src-list="[item.url]"/>
              <el-button class="delete-button" @click="handleDelete(item.id)">删除图片</el-button>
            </div>
          </div>
          <el-upload
              :auto-upload="false"
              class="icon-uploader"
              :show-file-list="false"
              :on-change="addImage">
            <el-icon class="icon-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item
            v-for="(item, index) in gameViewInfo.videoUrl"
            :key="index">
          视频地址：<a :href="item.url">{{item.url}}</a>
          <el-button style="margin-left: 40px" type="danger" @click="handleDelete(item.id)">删除视频</el-button>
        </el-form-item>
        <el-form-item>
          <el-upload
              :auto-upload="false"
              :show-file-list="false"
              :on-change="addVideo">
            <el-button size="large" type="primary">添加视频</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item style="height: 500px"></el-form-item>
      </el-form>
    </template>
    <template #footerLeft>
      <el-button class="button" @click="cancel" type="info">取消</el-button>
    </template>
  </EditContainer>
</template>

<style scoped lang="scss">
.outContainer {
  padding: 10px;

  .image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;

    .image {
      display: block;
      width: 380px;
    }

    .delete-button {
      position: absolute;
      width: 100px;
      height: 40px;
      left: 140px;
      bottom: -50px;
      background-color: red;
      line-height: 40px;
      color: $backgroundColor;
      transition: all 0.5s;
    }
  }
  .image-container:hover .delete-button {
    bottom: 10px;
  }
}
.icon-uploader {
  :deep {
    .el-upload {
      width: 380px;
      height: 200px;
      margin: 10px;
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.icon-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
.video {
  width: 800px;
}
</style>
